<template>
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  //  组件中获取组件的dom元素
  mounted() {
    var myEchart = echarts.init(this.$refs.myDiv)
    myEchart.setOption({
      title: {
        text: 'AI模型',
        subtext: '推理速度',
        top: 10,
        left: 10
      },
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
      },
      legend: {
        type: 'scroll',
        bottom: 10,
        data: (function () {
          var list = []
          for (var i = 1; i <= 1; i++) {
            list.push(i + 2023 + '')
          }
          return list
        })()
      },
      visualMap: {
        top: 'middle',
        right: 10,
        color: ['red', 'yellow'],
        calculable: true
      },
      radar: {
        indicator: [
          { text: 'DeepChem', max: 400 },
          { text: 'Predictive Maintenance Models', max: 400 },
          { text: 'Fraud Detection Models', max: 400 },
          { text: 'Risk Assessment Models', max: 400 },
          { text: 'Customer Segmentation Models', max: 400 }
        ]
      },
      series: (function () {
        var series = []
        for (var i = 1; i <= 28; i++) {
          series.push({
            type: 'radar',
            symbol: 'none',
            lineStyle: {
              width: 1
            },
            emphasis: {
              areaStyle: {
                color: 'rgba(0,250,0,0.3)'
              }
            },
            data: [
              {
                value: [(40 - i) * 10, (38 - i) * 4 + 60, i * 5 + 10, i * 9, (i * i) / 2],
                name: i + 2000 + ''
              }
            ]
          })
        }
        return series
      })()
    })
  }
}
</script>

<style>
.radar-echart {
  width: 500px; /* 缩小宽度 */
  height: 300px; /* 缩小高度 */
}
</style>
